<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form
        :inline="true"
        :model="roleFrom"
        class="demo-form-inline"
        style="display: flex"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleFrom.roleName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickall">查询</el-button>
          <el-button @click="reast">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="roleAdd(1)">新增</el-button>
      </div>

      <el-table
        :tree-props="{ children: 'children' }"
        row-key="_id"
        ref="multipleTableRef"
        :data="roleList"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column lable="操作" min-width="160">
          <template #default="scope">
            <el-button type="primary" @click="roleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="roleChouse(scope.row)"
              >设置权限</el-button
            >
            <el-button type="success" @click="roleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="showMadol" title="用户新增">
      <el-form :model="roleFrom" ref="dialogForm" :rules="rules">
        <el-form-item label="菜单名称" prop="roleName">
          <el-input v-model="roleFrom.roleName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="roleFrom.remark" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import api from '../api'
import utils from '../utils/utils.js'


// 定义菜单列表
// const roletFrom = ref([])
// 定义菜单form对象
const roleFrom = reactive({})

let roleList = ref([])

// 定义获取表单节点
const dialogForm = ref(null)
// 获取角色列表
const getRoleList = async () => {
  let data = {
    roleName: roleList.roleName
  }
  let { list } = await api.getRoleList(data)
  roleList.value = list
  console.log(roleList.value);
}
getRoleList()
//定义动态列表
const columns = reactive([
  {
    label: "角色名称",
    prop: "roleName",
    // width: 150
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "权限列表",
    prop: "halfCheckedKeys",
    formatter (row, column, value) {
      return {
        1: "用户管理",
        2: "菜单管理",
        3: "角色管理",
        4: "部门管理",
        5: "休假申请",
        6: "待审批",
      }[value];
    },
  },
  {
    label: "更新时间",
    prop: "updateTime",
  },

  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);

// 定义用户行为
const action = ref('create')
// 定义弹窗行为
const showMadol = ref(false)
//定义弹窗方法
const roleAdd = (type, row) => {
  action.value = 'create'
  showMadol.value = !showMadol.value
}
// 定义表单的正则规则
const rules = reactive({
  menuName: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 6,
      message: "长度在2-8个字符",
      trigger: "blur",
    },
  ],
})
// 表单重置方法
const resetForm = () => {
  dialogForm.value.resetFields()
}

// 定义取消按钮
const handleCancel = () => {
  resetForm()
  showMadol.value = !showMadol.value
}


// 定义提交按钮方法
const handleSubmit = () => {
  dialogForm.value.validate(async (vaild) => {
    if (vaild) {
      console.log(roleList);
      let data = toRaw(roleList)
      console.log(data);
      data.action = action.value
      let res = await api.getOperate(data)
      resetForm()
      showMadol.value = !showMadol.value
      getRoleList()
    }
  })
}

// 定义编辑按钮
const roleEdit = (row) => {
  action.value = 'edit'
  showMadol.value = !showMadol.value
  nextTick(() => {
    Object.assign(roletList, row)
  })
  resetForm()
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
  getRoleList()
}

// 定义删除事件
const roleDel = async (row) => {
  action.value = "delete"
  console.log(row._id);
  let data = { _id: row._id, action: action.value }
  let res = await api.getOperate(data)
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
  getRoleList()
}

// 定义权限设置
const roleChouse = (row) => {
  showMadol.value = !showMadol.value
}

// 定义查询按钮
const clickall = () => {
  console.log(roleFrom);
  getRoleList()
}

// 定义重置按钮
const reast = () => {
  roleFrom.roleName = ''
  getRoleList()
}

</script>

<style lang="scss" scoped>
</style>